<template>
  <div class="about">
    <my-header>
      <template #left>
        <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      </template>
      <template #center>
        {{ city.name }}
      </template>
      <template #right> 切换城市 </template>
    </my-header>
    <my-input v-model="searchVal" @search="searchBtn"></my-input>
    <ul class="count_list" v-if="showList.length">
      <li v-for="(item,index) in showList" :key="index" @click="jump(item)">
        <h5>{{item.name}}</h5>
        <p>{{item.address}}</p>
      </li>
    </ul>
    <div class="history" v-else>
       <h4>历史记录</h4>
       <ul class="history_ct">
         <li v-for="(item,index) in $store.state.history" :key="index" @click="jump(item)">
            <h5>{{item.name}}</h5>
            <p>{{item.address}}</p>
         </li>
         <li style="text-align:center;" @click="$store.commit('clear')">清空历史记录</li>
       </ul>
    </div>
  </div>
</template>
<script>
import myHeader from "../components/myHeader.vue";
import api from "../api/request";
import { reactive, toRefs } from "vue";
import MyInput from "../components/myInput.vue";
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
export default {
  components: { myHeader, MyInput },
  setup() {
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      city: {}, // 城市的信息
      searchVal: '', // 搜索的值
      showList:[], // 搜索出来的商圈的结果
    });
    api.get("/v1/cities/32").then((res) => {
      data.city = res;
    });
    const searchBtn = () => {
      //  console.log(data.searchVal);
      api.get(`/v1/pois?type=search&city_id=32&keyword=${data.searchVal}`).then(res => {
        if (res.message == '参数错误'){
          data.showList = [];
        } else {
          data.showList = res;
        }
      })
    }
    const jump = (val) => {
      store.commit('addHistory',val);
      router.push(`/index?geohash=${val.geohash}`);
    }
    return {
      ...toRefs(data),
      searchBtn,
      jump
    };
  },
};
</script>
<style lang="scss" scoped>
.about {
  height: 100%;
  background: #e9e9e9;
}
.count_list,.history_ct{
  height: calc(100% - 152px);
  overflow: auto;
  li{
    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    p{
      font-size: 12px;
      color: #999;
      margin-top: 10px;
    }
  }
}
.history_ct{
  max-height: calc(100% - 174px);
}
</style>
